import { useRef, useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import { Button, Input, Toast } from 'antd-mobile'
import { Form } from 'antd-mobile'
import Nabar from '../../conpoment/Nabar'
import UseDjs from '../../hooks/UseDjs'
import http from '../../api/index'
import styles from './index.module.css'

function DeletionConfirmation() {
  const navigate = useNavigate()
  const [showSmsModal, setShowSmsModal] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const [showSuccessModal, setShowSuccessModal] = useState(false)
  const [num, fn, disable] = UseDjs()
  const [from] = Form.useForm()
  const [codeValue, setCodeValue] = useState('')
  // 保存待回显的验证码，等待倒计时结束后再写入表单
  const pendingCodeRef = useRef<string | null>(null)
  const yzm = async () => {
    try {
      const { data: res } = await http.post('/api/login', { phone: '18538493048' })
      console.log('获取验证码响应:', res.data)
      
      // 先缓存验证码并清空输入框，待倒计时结束后再回显
      pendingCodeRef.current = String(res.data ?? '')
      setCodeValue('')  // 清空UI显示
      from.setFieldsValue({ code: '' })
      // 启动倒计时
      fn()
    } catch (error) {
      Toast.show('发送验证码失败，请重试')
    }
  }

  // 倒计时结束（按钮从禁用变为可用）后，将验证码回显到表单
  useEffect(() => {
    console.log('useEffect触发 - disable:', disable, 'pendingCode:', pendingCodeRef.current)
    if (!disable && pendingCodeRef.current) {
      const code = pendingCodeRef.current
      console.log('开始回显验证码:', code)
      setCodeValue(code)  // 更新UI显示
      from.setFieldsValue({ code })  // 更新表单数据
      console.log('验证码回显完成')
      pendingCodeRef.current = null
    }
  }, [disable, from])
  const handleContinueDeletion = () => {
    // 显示短信验证弹出框
    setShowSmsModal(true)
    // 不直接启动倒计时，等待用户点击获取验证码按钮
  }
  const handleConfirmSms = async () => {
    if (!codeValue.trim()) {
      Toast.show('请输入验证码')
      return
    }
    
    // 开始加载
    setIsLoading(true)
    
      try {
        // 模拟验证过程（实际项目中这里应该是API调用）
        await new Promise(resolve => setTimeout(resolve, 200))
        
        // 停止加载，显示成功弹框
        setIsLoading(false)
        setShowSuccessModal(true)
        
        // 清除用户数据
        localStorage.removeItem('token')
        localStorage.removeItem('user')
        
        // 延迟跳转到登录页
        setTimeout(() => {
          navigate('/login')
        }, 2000)
        
      } catch (error) {
        console.error('验证失败:', error)
        Toast.show('验证失败，请重试')
        setIsLoading(false)
      }
  }

  const handleCancelSms = () => {
    setShowSmsModal(false)
    setCodeValue('')
    from.setFieldsValue({ code: '' })
    pendingCodeRef.current = null
    // 重置倒计时状态（如果正在倒计时中）
    if (disable) {
      // 这里可以添加重置倒计时的逻辑，但UseDjs hook没有提供重置方法
      // 所以只能等待倒计时自然结束
    }
  }

  return (
    <div className={styles.page}>
      <Nabar title='注销确认' sticky={false} />
      
      <div className={styles.content}>
        {/* 警告提示 */}
        <div className={styles.warningSection}>
          <div className={styles.warningIcon}>!</div>
          <p className={styles.warningText}>
            请确保以下条件都已满足,方可注销
          </p>
        </div>

        {/* 条件列表 */}
        <div className={styles.conditionsList}>
          <div className={styles.conditionItem}>
            <div className={styles.conditionNumber}>1</div>
            <div className={styles.conditionContent}>
              <div className={styles.conditionTitle}>账号处于安全状态</div>
              <div className={styles.conditionDesc}>
                近两周内问更改绑定手机号且账号无被限制记录,当前绑定手机号能正常接收短信验证。
              </div>
            </div>
          </div>

          <div className={styles.conditionItem}>
            <div className={styles.conditionNumber}>2</div>
            <div className={styles.conditionContent}>
              <div className={styles.conditionTitle}>账号订单已完成或退款</div>
              <div className={styles.conditionDesc}>
                挂号订单、医嘱订单、住院充值订单、便民门诊订单都已完成或退款。
              </div>
            </div>
          </div>

          <div className={styles.conditionItem}>
            <div className={styles.conditionNumber}>3</div>
            <div className={styles.conditionContent}>
              <div className={styles.conditionTitle}>账号无任何未处理完成的纠纷</div>
            </div>
          </div>
        </div>
      </div>

      {/* 确认按钮 */}
      <div className={styles.buttonContainer}>
        <Button 
          className={styles.confirmationButton} 
          onClick={handleContinueDeletion}
          block
        >
          我已完成以上操作,继续注销
        </Button>
      </div>

      {/* 短信验证弹出框 */}
      {showSmsModal && (
        <div className={styles.modalOverlay}>
          <div className={styles.smsModal}>
            <div className={styles.modalTitle}>手机短信验证</div>
            <div className={styles.modalMessage}>
              已发送短信验证码至
            </div>
            <div className={styles.phoneNumber}>18538493048</div>
            
            <div className={styles.inputContainer}>
                <Input
                  placeholder="请输入短信验证码"
                  value={codeValue}
                  onChange={(val) => {
                    setCodeValue(val)
                    from.setFieldsValue({ code: val })
                  }}
                  className={styles.smsInput}
                />
                <Button 
                className="get-code-button" 
                onClick={yzm} 
                disabled={disable}
              >
                {disable ? `获取验证码(${num})` : '获取验证码'}
              </Button>
            </div>
            
            <div className={styles.modalButtons}>
              <Button 
                className={styles.cancelButton}
                onClick={handleCancelSms}
              >
                取消
              </Button>
              <Button 
                className={styles.confirmButton}
                onClick={handleConfirmSms}
              >
                确定
              </Button>
            </div>
          </div>
        </div>
      )}

      {/* 加载遮罩层 */}
      {isLoading && (
        <div className={styles.loadingOverlay}>
          <div className={styles.loadingContainer}>
            <div className={styles.loadingSpinner}></div>
            <div className={styles.loadingText}>正在注销账号...</div>
          </div>
        </div>
      )}

      {/* 成功弹框 */}
      {showSuccessModal && (
        <div className={styles.successOverlay}>
          <div className={styles.successModal}>
            <div className={styles.successIcon}>✓</div>
            <div className={styles.successText}>注销成功</div>
          </div>
        </div>
      )}
    </div>
  )
}

export default DeletionConfirmation
